<script lang="ts">
    import { onMount, setContext } from "svelte";
    import { useClassList } from "../utils/useClassList";
    import type { MenuGroupProps } from "./Menu";
    import { MenuContextKey, useMenuContext } from "./Menu.svelte";
    import MenuItem from "./MenuItem.svelte";

    const props: MenuGroupProps = $props();
    if (!props.name) {
        console.warn("MenuGroup need name prop");
    }
    const classList = $derived(useClassList(props, "cm-menu-group"));
    const ctx: any = useMenuContext();
    let self: any;
    let listEle: any;
    const level = ctx.level;
    const parentName = ctx.parentName;

    const item = {
        name: props.name,
        parent: null,
        children: [],
    };
    if (ctx && props.name) {
        ctx.treeMap[props.name] = item;
        if (parentName === "__root") {
            ctx?.tree.push(item);
        } else {
            const parent = ctx.treeMap[parentName];
            item.parent = parent;
            parent.children.push(item);
        }
    }

    $effect(() => {
        let flag = false;
        if (ctx && self) {
            flag = ctx.store.min && parentName === "__root";
        }
    });
    setContext(MenuContextKey, { ...ctx, level: level + 1, parentName: props.name });
</script>

<li class={classList}>
    <MenuItem icon={props.icon} isSubmenuTitle>
        {props.title}
    </MenuItem>
    <ul class="cm-menu-group-list">
        {@render props.children?.()}
    </ul>
</li>
